<template>
  <div>
    <div style="font-size:18px;">退货管理</div>
    <hr>
    <br>   
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="订单编号" v-model="listQuery.param.indentNo">
      </el-input>
      <el-select clearable filterable style="width: 180px" class="filter-item" v-model="listQuery.param.status" placeholder="退货状态">
        <el-option v-for="item in bangHuiOptions" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <div class="left filter-item">
          <el-date-picker
              style="width: 200px;display: inline-block;"
              v-model="listQuery.param.startTime"
              type="date"
              placeholder="选择开始时间">
          </el-date-picker>
      </div>
      <div class="left filter-item">
          <el-date-picker
              style="width: 200px;display: inline-block;"
              v-model="listQuery.param.endTime"
              type="date"
              placeholder="选择结束时间">
          </el-date-picker>
      </div>
      <el-button class="filter-item" style="margin-left: 30px;" type="primary" icon="search" @click="handleFilter">搜索</el-button>
    </div>

    <!-- 表身 -->
    <el-table :key='tableKey' :data="retreatList" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 1500px">

      <el-table-column align="center" label="订单编号" width="200">
        <template scope="scope">
          <span>{{scope.row.indentNo}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户名" width="160">
        <template scope="scope">
          <span>{{scope.row.userNick}}</span>
        </template>
      </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="商铺名" width="160">
        <template scope="scope">
          <span>{{scope.row.shopName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="金额" width="160">
        <template scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="退货状态" width="160">
        <template scope="scope">
          <span>{{scope.row.statusName}}</span>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="申请退货时间">
        <template scope="scope">
          <span>{{scope.row.createDateName}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200">
        <template scope="scope">
          <el-button size="small" type="success"  @click="handleDetail(scope.row)">
              详情
          </el-button>
          <el-button size="small" type="primary"  @click="handleDetailUpdate(scope.row)">
              &nbsp;&nbsp;更&nbsp;&nbsp;改&nbsp;&nbsp;状&nbsp;&nbsp;态&nbsp;&nbsp;
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 订单详情 -->
    <el-dialog :title="titleText" :visible.sync="detailDialogFormVisible">
        <hr>
        <div align="center">该功能暂未实现，请等待后续更新</div>
        <hr>
        <div style="clear:both;"></div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="detailDialogFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 更改状态 -->
    <el-dialog :title="titleUpdate" :visible.sync="detailDialogFormVisibleUpdate">
       <!--  <hr>
        <div align="center"><b>该功能暂未实现，请等待后续更新</b></div>
        <hr> -->

        <el-form class="small-space" :model="updateStatusTemp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>

          <!-- <div align="center"> -->
              <!-- <el-select clearable filterable style="width: 180px" class="filter-item" v-model="listQuery.param.status" placeholder="选择状态">
                <el-option v-for="item in updateStatusOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>  
              </el-select> -->
          <!-- </div> -->
          <div align="center">
            <el-form-item label="状态">
              <el-select class="filter-item" style="width: 200px;" v-model="updateStatusTemp.status" placeholder="请选择状态">
                <el-option v-for="item in updateStatusOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <div style="clear:both;"></div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="detailDialogFormVisibleUpdate = false">取 消</el-button>
            <el-button type="primary" @click="comfirmChangeInfo()">确 定</el-button>
        </div>
    </el-dialog>

  </div>
</template>
<script>
    import $ from 'jquery';
    import Vue from 'vue';
    // import { orderList } from '../../utils/resourse';

    export default {
      data() {
        return {
          detailDialogFormVisible: false,
          detailDialogFormVisibleUpdate: false,
          listLoading: false,
          titleText: '',
          infoTemp: '',
          titleUpdate: '',
          retreatList: [],
          listQuery: {
              pageNumber: 1,
              pageSize: 10,
              param: {
                  indentNo: '',
                  userId: '',
                  shopId:'',
                  shopName: '',
                  price: '',
                  status: null,
                  startTime: null,
                  endTime: null
              }
          },
          updateStatusTemp: {
              id: null,
              status:'',
              shopSay: ''
          },
          bangHuiOptions: [
              {id: "0",name: "申请退货款"},
              {id: "1", name:"同意退货，退货中"},
              {id: "2", name:"验收"},
              {id: "3", name:"不同意退货款"}
          ],
          updateStatusOptions: [
              {id: "1", name:"同意退货"},
              {id: "2", name:"验收"},
              {id: "3", name:"不同意退货款"}
          ],
          dialogPointVisible: false,
          tableKey: 0
        };
      },
      filters: {

      },
      created(){
          let self = this;
          // self.editDialogFormVisible=true;
          // self.detailDialogFormVisible=true;
          // self.showDialog=true;
      },
      mounted(){
        let self = this;
        this.getRetreatList();
      },
      methods: {
        getRetreatList(){
            let self = this;
            self.myajax("/retreat/list",self.listQuery,function(res){
                console.log(res);
                self.retreatList = res.data.list;
                self.total = res.data.total;
            });
        },
        handleDetail(row) {
            let self = this;
            self.detailDialogFormVisible = true;
        },
        handleDetailUpdate(row) {
            let self = this;
            self.updateStatusTemp.id = row.id;
            self.detailDialogFormVisibleUpdate = true;
        },
        handleChange(value) {
            console.log(value);
        },
        indexMethod(index) {
            return index + 1;
        },
        handleFilter() {       //条件搜索
            let self = this;
            self.listQuery.pageNumber = 1;
            let startTime = self.listQuery.param.startTime;
            let endTime = self.listQuery.param.endTime;
            if(startTime&&endTime){
                self.listQuery.param.startTime = new Date(startTime);
                self.listQuery.param.endTime = new Date(endTime);
            }
            self.getRetreatList();
        },
        comfirmChangeInfo() {
            let self=this;
            this.myajax("/retreat/examine",self.updateStatusTemp,res=>{
            console.log(self.updateStatusTemp);
            console.log(res);
            if(res.code==1000){
              self.getRetreatList();
              self.detailDialogFormVisibleUpdate = false;
              self.$message({
                  type: 'success',
                  message: '退款成功!',
                  duration: 2000
              });  
            }else if (res.code==1009){
              self.getRetreatList();
              self.detailDialogFormVisibleUpdate = false;
              self.$message({
                  type: 'success',
                  message: '审核通过,已通知买家!',
                  duration: 2000
              });
            }else if (res.code==1017){
              self.getRetreatList();
              self.detailDialogFormVisibleUpdate = false;
              self.$message({
                  type: 'error',
                  message: '退款失败',
                  duration: 2000
              });
            }else if (res.code==1010){
              self.getRetreatList();
              self.detailDialogFormVisibleUpdate = false;
              self.$message({
                  type: 'warning',
                  message: '审核未通过，已通知买家',
                  duration: 2000
              });
            }   
          });
        },
      }
    };
</script>
<style scoped>
    .input_edit{
        width: 200px;
        float: left;
        margin-right:10px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
    .filter-container {
        padding-bottom: 10px;
    }
    .filter-item {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 10px;
    }
    .avatar {
        width: 90px;
        height: 90px;
        /*border-radius: 50%;*/
        margin-top: 10px;
        margin-bottom: 10px;
        display: block;
    }
</style>
